<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employees</title>
    <style>
        table, tr, td, th {
            border: 1px solid black;
            border-collapse: collapse;
        }
        .gender {
            text-align: center;
        }
    </style>
</head>
<body>
<table id="dataTable">
    <tr>
        <th colspan="5">Employees</th>
    </tr>
    <tr>
        <th>ID</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options(<a th:href="@{/toAdd}">add</a>)</th>
    </tr>
    <tr th:each="employee : ${employees}">
        <td th:text="${employee.id}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td class="gender" th:text="${employee.gender}"></td>
        <td>
<!--            <a th:href="@{/employee/}+${employee.id}">delete</a>-->
            <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete</a>
            <a th:href="@{/employee/}+${employee.id}">update</a>
        </td>
    </tr>
</table>
<form id="deleteForm" method="post">
    <input type="hidden" name="_method" value="delete">
</form>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
    new Vue({
        el: '#dataTable',
        data(){
            return {}
        },
        props: [],
        computed:{},
        components:{},
        methods:{
            deleteEmployee(e){
                let deleteForm = document.getElementById("deleteForm");
                deleteForm.action = e.target.href;
                deleteForm.submit();
                // 取消默认
                e.preventDefault();
            },
        },
        watch:{},
        filters: {},
        directives: {},
    });
</script>
</body>
</html>